<template>
  <page-header-wrapper>
    <!--内容提示区-->
    <template v-slot:content>
      <!--倒计时-->
      <flip-countdown
        v-if='startTime !== ""'
        :deadline="endTime"
        :showDays='false'
        :labels='countdownText'
        labelSize='18px'
        countdownSize='35px'
      ></flip-countdown>
  
      <p style='border-left: 2px solid #bb35f6;padding-left: 10px;'> 尽量都完成 有思路写思路(注释) 均可酌情给分 </p>
      <p style='border-left: 2px solid #d7d5d5;padding-left: 10px;'
         v-if='$store.state.user.info.userType === "00"'>
        此消息仅协会用户可见:
        <br>
        协会内用户作答仅作为调试/审核, 系统不会分配评分, 记录会自动清除
        <br>
        未到答题时间内,新人用户查询获取不到任何结果,而协会成员则不受此限制
        <br>
      </p>
    </template>
    
    <a-card>
      <div style='margin-left: 30px;'>
        <a-tooltip title='刷新'>
          <a-icon type='reload' style='font-size: 18px;cursor: pointer;' @click='reloadData' />
        </a-tooltip>
      </div>
      
      <a-table :columns='columns'
               bordered
               rowKey='topicId'
               :loading='loading'
               :pagination='pagination'
               :data-source='data'
               @change='handleTableChange'
               class='question-list'>
        
        <!--题目序号-->
        <span
          slot='order'
          slot-scope='order'>
        <a-tag color='geekblue'>
          {{ order }}
        </a-tag>
      </span>
        <!--题目名称-->
        <span slot-scope='title'>
        <a-icon type='smile-o' /> {{ title }}
      </span>
        <!--难度-->
        <span
          slot='level'
          slot-scope='level'>
        <a-tag
          :color='getTagColor(level)'>
          {{ level === '0' ? '容易' : level === '1' ? '中等' : level === '2' ? '困难' : '未知难度' }}
        </a-tag>
      </span>
        <!--标签-->
        <span
          slot='tags'
          slot-scope='tags'>
          <a-space>
            <a-button size='small' v-for='tag in tags' :key='tag'>
              {{ tag }}
            </a-button>
          </a-space>
      </span>
        <!--状态-->
        <span
          slot='isComplete'
          slot-scope='isComplete'>
        <a-tag
          size='large'
          :color="isComplete === '0' ? 'purple' :  '#87d068'">
          {{ isComplete === '0' ? '待完成' : '已完成' }}
        </a-tag>
      </span>
        
        <span
          slot='action'
          slot-scope='text, record'>
         <!--去答题按钮-->
        <a-button
          v-if='record.isComplete === "0"'
          style='border-radius: 10px'
          type="primary"
          @click='goToDoTopic(text,record)'>
          进行答题
        </a-button>
          <!--修改解题按钮-->
        <a-button
          v-else
          style='border-radius: 10px'
          @click='goToUpdateAns(text,record)'>
          修改解题
        </a-button>
      </span>
      
      </a-table>
    </a-card>
  
  </page-header-wrapper>
</template>

<script>

import { getTopicList } from '@/api/newcomerTopic'
import FlipCountdown from 'vue2-flip-countdown'
import { getAnsTime } from '@/api/systemConfig'

const columns = [
  {
    title: '序号',
    dataIndex: 'order',
    scopedSlots: { customRender: 'order' }
  },
  {
    title: '题目名称',
    dataIndex: 'title',
    scopedSlots: { customRender: 'title' }
  },
  {
    title: '分值',
    dataIndex: 'totalPoints',
    scopedSlots: { customRender: 'totalPoints' }
  },
  {
    title: '出题人',
    dataIndex: 'authorName',
    scopedSlots: { customRender: 'authorName' }
  },
  {
    title: '难度',
    dataIndex: 'level',
    scopedSlots: { customRender: 'level' }
  },
  {
    title: '标签',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' }
  },
  {
    title: '完成状态',
    dataIndex: 'isComplete',
    sorter: (a, b) => a.isComplete - b.isComplete,
    scopedSlots: { customRender: 'isComplete' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'QuestionList',
  components: { FlipCountdown },
  data() {
    return {
      // 表格数据
      data: [],
      // 倒计时
      countdownText: {
        hours: '时',
        minutes: '分',
        seconds: '秒',
      },
      // 开始时间
      startTime:'',
      // 结束时间
      endTime:'',
      // 列数据
      columns,
      loading: false,
      // 查询参数
      queryParam: {},
      // 分页参数
      pagination: {
        size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '15', '20'],//可选的页面显示条数
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        }, //展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true //是否可以改变pageSize
      },
      // 操作是否频繁
      isFrequent: false,
      clickCount: 0
    }
  },
  created() {
    this.getTopicList()
    this.getAnsTime()
  },
  mounted() {
  },
  watch: {
    isFrequent(newValue, oldValue) {
      if (newValue) {
        this.$message.error('请求过于频繁,请稍后重试')
      }
    }
  },
  methods: {
    getTagColor(level) {
      switch (level) {
        case '0':
          return 'green'
        case '1':
          return 'orange'
        case '2':
          return 'red'
        default:
          return 'blue'
      }
    },
    getTopicList() {
      this.loading = true
      getTopicList(this.queryParam).then((response) => {
        this.data = response.rows
        this.pagination.total = response.total
        this.loading = false
      })
    },
    // 获取答题时间
    getAnsTime() {
      getAnsTime().then(response => {
        this.startTime = response.data.date + ' ' + response.data.start
        this.endTime = response.data.date + ' ' + response.data.end
        // 判断开始时间是否到了
        let now = new Date()
        let endTime = new Date(response.data.date + ' ' + response.data.end)
        if (now > endTime) {
          this.startTime = ''
        }
      })
    },
    reloadData() {
      const currentTime = Date.now()
      if (currentTime - this.lastClickTime < 3000) {
        this.clickCount++
        if (this.clickCount >= 3) {
          this.isFrequent = true
          // 在5秒后重置
          setTimeout(() => {
            this.clickCount = 0
            this.isFrequent = false
          }, 5000)
        } else {
          this.getTopicList()
          this.$message.success('刷新成功')
        }
      } else {
        this.clickCount = 1
        this.getTopicList()
        this.$message.success('刷新成功')
      }
      this.lastClickTime = currentTime
    },
    goToDoTopic(text, record) {
      let routeData = this.$router.resolve({
        path: '/reply/question',
        query: {
          topicId: record.topicId,
          mode: 'reply'
        }
      })
      window.open(routeData.href, '_blank')
    },
    goToUpdateAns(text, record) {
      let routeData = this.$router.resolve({
        path: '/reply/question',
        query: {
          topicId: record.topicId,
          mode: 'update'
        }
      })
      window.open(routeData.href, '_blank')
    },
    //表格改变时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      // 添加分页参数
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      
      this.getTopicList()
    }
  }
}
</script>

<style scoped lang='less'>
.question-list {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
</style>